<template>
    <div class="gva-form-box admin-content">
        <el-form
            :model="formData"
            ref="elFormRef1"
            label-position="right"
            label-width="0px"
        >
            <el-descriptions class="margin-top" title="" :column="4" border>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">
                            {{ `${il8n("kuanshibianhao.label")}:` }}
                        </div>
                    </template>
                    <span>{{ formData1.styleNum }}</span>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">客户编号:</div>
                    </template>
                    <el-form-item label="" prop="cumstomerNum">
                        {{ formData1.cumstomerNum }}
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">客户架倾角度:</div>
                    </template>
                    <el-form-item label="" prop="customerTiltAngle">
                        <input
                            :disabled="isEditing"
                            v-model="formData.customerTiltAngle"
                            :clearable="true"
                            placeholder="自定义填写"
                        />
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">片弧弯:</div>
                    </template>
                    <el-form-item label="" prop="sheetArcBend">
                        <el-select
                            v-model="formData1.sheetArcBend"
                            placeholder="请选择"
                            style="width: 100%"
                            :disabled="isEditing"
                        >
                            <el-option
                                v-for="item in props.dictOptions.sheetArcBend"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">SBU:</div>
                    </template>
                    <el-form-item label="" prop="sbuNum">
                        {{ formData1.sbuNum }}
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">客户款号:</div>
                    </template>
                    <el-form-item label="" prop="customerStyleNum">
                        {{ formData1.customerStyleNum }}
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">本厂架倾角度:</div>
                    </template>
                    <el-form-item label="" prop="localTiltAngle">
                        <input
                            v-model="formData.localTiltAngle"
                            :clearable="true"
                            placeholder="自定义填写"
                            :disabled="isEditing"
                        />
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">本厂款号:</div>
                    </template>
                    <el-form-item label="" prop="localStyleNum">
                        {{ formData1.localStyleNum }}
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">客户品牌:</div>
                    </template>
                    <el-form-item label="" prop="customerBrand">
                        {{ formData1.customerBrand }}
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">镜架材质:</div>
                    </template>
                    <el-form-item label="" prop="frameMaterials">
                        {{ formData1.frameMaterials }}
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                    v-if="formData1.frameMaterials == '中金架'"
                >
                    <template #label>
                        <div class="cell-item">中金架类:</div>
                    </template>
                    <el-form-item label="" prop="metalFrameCate">
                        <el-select
                            v-model="formData1.metalFrameCate"
                            placeholder="请选择"
                            style="width: 100%"
                            :disabled="isEditing"
                        >
                            <el-option
                                v-for="item in props.dictOptions.metalFrameCate"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">创建时间:</div>
                    </template>
                    <el-form-item label="" prop="CreatedAt">
                        {{
                            formatDate(
                                formData1.CreatedAt,
                                "yyyy-MM-dd hh:mm:ss"
                            )
                        }}
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">更新时间:</div>
                    </template>
                    <el-form-item label="" prop="UpdatedAt">
                        {{
                            formatDate(
                                formData1.UpdatedAt,
                                "yyyy-MM-dd hh:mm:ss"
                            )
                        }}
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">创建人:</div>
                    </template>
                    <el-form-item label="" prop="createUser">
                        <!-- {{ formData1.createdUser?.nickName }} -->
                        <span
                            v-if="
                                formData1.createdUser &&
                                formData1.createdUser.nickName
                            "
                        >
                            {{ formData1.createdUser.nickName }}
                        </span>
                        <span v-else>{{ formData1.createUser }}</span>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">第一版本创建时间:</div>
                    </template>
                    <el-form-item label="" prop="UpdatedAt">
                      <span >  {{formatDate( formData1.FirstCreatedAt, "yyyy-MM-dd"  )=="1-01-01" ? '' :formatDate( formData1.FirstCreatedAt, "yyyy-MM-dd"  )  }}</span>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                    :span="formData1.frameMaterials == '中金架'?2:3"
                >
                    <template #label>
                        <div class="cell-item">更新人:</div>
                    </template>
                    <el-form-item label="" prop="updateUser">
                        <!-- {{ formData1.updatedUser?.nickName }} -->
                        <span
                            v-if="
                                formData1.updatedUser &&
                                formData1.updatedUser.nickName
                            "
                        >
                            {{ formData1.updatedUser.nickName }}
                        </span>
                        <span v-else>{{ formData1.updateUser }}</span>
                    </el-form-item>
                </el-descriptions-item>

                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                    :span="4"
                >
                    <template #label>
                        <div class="cell-item">款式备注:</div>
                    </template>
                    <el-form-item label="" prop="styleNote" style="width: 100%">
                        <el-input
                            v-model="formData.styleNote"
                            :clearable="true"
                            :autosize="{ minRows: 1 }"
                            :maxlength="500"
                            show-word-limit
                            type="textarea"
                            placeholder="自定义填写"
                            :disabled="isEditing"
                        />
                    </el-form-item>
                </el-descriptions-item>
              
            </el-descriptions>
        </el-form>
    </div>
</template>

<script setup>
defineOptions({
    name: "plmProductSpecViewBase",
});
// 自动获取字典
import { ref, reactive, onMounted, computed } from "vue";
import { useDict } from "@/utils/dictionary";
import { formatDate } from "@/utils/format";
import { useI18n } from "vue-i18n";

const { t: il8n } = useI18n();
const props = defineProps({
    formData: { type: Object, default: {} },
    dictOptions: { type: Object, default: {} },
    productStylesList: { type: Array, default: [] },
    isEditing: { type: Boolean, default: false },
});
const emit = defineEmits([
    "update:formData",
    "productStylesChange",
    "remoteMethodProjectStyles",
]);
const formData1 = computed({
    get() {
        const proxy = new Proxy(props.formData, {
            get(target, key) {
                return Reflect.get(target, key);
            },
            set(target, key, value) {
                console.log(target, key, value);
                emit("update:formData", {
                    ...target,
                    [key]: value,
                });
                return true;
            },
        });
        return proxy;
    },
    set(val) {
        console.log("更新");
        emit("update:formData", val);
    },
});

// 获取款式列表
const remoteMethodProjectStyles = (keyword) => {
    emit("remoteMethodProjectStyles", keyword);
};

// 改变
function productStylesChange(params) {
    emit("productStylesChange", params);
}
</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
.gva-form-box {
    padding: 0;
    :deep(.my-label) {
        width: 9%;
    }
    :deep(.my-content) {
        width: 16%;
    }
}
:deep(.el-form-item) {
    margin-bottom: 0;
}
:deep(.el-select__wrapper) {
    min-height: 24px;
}
</style>
